<template>
  <div class="main-container">
    <div style="padding-top: 68.79px" ></div>

    <!-- 数据集操作及列表 -->
    <div class="container">
      <div class="row1">
        <div class="left">
          <h2 class="title">
            数据集
          </h2>
          <p class="down-text">
            已加载 <strong>{{ datasets.length }}</strong> 个数据集
          </p>
        </div>
        <div class="buttons">
          <div
            class="col-md-auto btn-group"
            role="group"
            style="padding-bottom: 10px"
          >
            <button
              type="button"
              class="btn btn-success"
              data-toggle="modal"
              data-target="#createDataset"
            >
              新建
            </button>
            <button type="button" class="btn btn-primary">导入</button>
            <button
              type="button"
              class="btn btn-secondary"
              @click="updatePage(page)"
            >
              刷新
            </button>
          </div>
        </div>
      </div>
      <hr />
      <!-- 数据集显示界面 -->
      <p v-if="datasets.length < 1" class="text-center">
        暂无数据集
      </p>
      <div v-else>
        <div class="dataset-card" ref="datasetCard">
          <DatasetCard
            v-for="dataset in datasets"
            :key="dataset.id"
            :dataset="dataset"
            :categories="categories"
          />
        </div>
        <!-- 滚动 -->
        <div style="display:flex; justify-content:center">
          <div style="margin-right:45px">
            <i class="fa fa-angle-double-left scroll-arrow" @mousedown="startScrollLeft" @mouseup="stopScroll"></i>
          </div>
          <div>
            <i class="fa fa-angle-double-right scroll-arrow" @mousedown="startScrollRight" @mouseup="stopScroll"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加数据集form -->
    <div class="modal fade" tabindex="-1" role="dialog" id="createDataset">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">新建数据集</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div
                class="form-group"
                :class="{ 'was-validated': validDatasetName.length !== 0 }"
              >
                <label>名称</label>
                <input
                  v-model="create.name"
                  class="form-control"
                  placeholder="请输入数据集名称"
                  required
                />
                <div class="invalid-feedback">
                  {{ validDatasetName }}
                </div>
              </div>
              <div class="form-group">
                <label>数据集类型</label>
                <TypesInput @selectType="selectType"/>
              </div>

              <div class="form-group">
                <label>默认类别</label>
                <TagsInput
                  v-model="create.categories"
                  element-id="createCategory"
                  :existing-tags="categoryTags"
                  :typeahead="true"
                  :typeahead-activation-threshold="0"
                ></TagsInput>
              </div>
              <div class="form-group" required>
                <label>文件夹路径</label>
                <input class="form-control" disabled :value="directory" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-primary"
              @click="createDataset"
            >
              创建
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import toastrs from "@/mixins/toastrs";
import Datasets from "@/models/datasets";
import AdminPanel from "@/models/admin";
import DatasetCard from "@/components/cards/DatasetCard";
import Pagination from "@/components/Pagination";
import TagsInput from "@/components/TagsInput";
import TypesInput from "../components/TypesInput";

import { mapMutations } from "vuex";

export default {
  name: "Datasets",
  components: { DatasetCard, Pagination, TagsInput, TypesInput },
  mixins: [toastrs],
  data() {
    return {
      pages: 1,
      limit: 52,
      page: 1,
      scrollInterval: null,
      scrollSpeed: 5, // 调整滚动速度，数值越大滚动越快
      create: {
        name: "",
        categories: [],
      },
      datasets: [],
      subdirectories: [],
      type: "",
      categories: [],
      users: [],
    };
  },
  methods: {
    ...mapMutations(["addProcess", "removeProcess"]),
    updatePage(page) {
      let process = "Loading datasets";
      this.addProcess(process);

      page = page || this.page;
      this.page = page;

      Datasets.allData({
        limit: this.limit,
        page: page,
      })
        .then((response) => {
          this.datasets = response.data.datasets;
          this.categories = response.data.categories;
          this.subdirectories = response.data.subdirectories;
          this.pages = response.data.pagination.pages;
          this.page = response.data.pagination.page;
          AdminPanel.getUsers(this.limit).then((response) => {
            this.users = response.data.users;
          });
        })
        .finally(() => this.removeProcess(process));
    },
    createDataset() {
      if (this.create.name.length < 1) return;
      let categories = [];

      for (let key in this.create.categories) {
        categories.push(this.create.categories[key]);
      }
      Datasets.create(this.create.name, categories, this.type)
        .then(() => {
          this.create.name = "";
          this.create.categories = [];
          this.updatePage();
        })
        .catch((error) => {
          this.axiosReqestError(
            "Creating Dataset",
            error.response.data.message
          );
        });
    },
    scrollLeft() {
      let container = this.$refs.datasetCard
      container.scrollLeft -= this.scrollSpeed
    },
    scrollRight() {
      let container = this.$refs.datasetCard
      container.scrollLeft += this.scrollSpeed
    },
    startScrollRight() {
      this.scrollInterval = setInterval(this.scrollRight, 10); // 调整定时器间隔，数值越小滚动越平滑
    },
    startScrollLeft() {
      this.scrollInterval = setInterval(this.scrollLeft, 10); // 调整定时器间隔，数值越小滚动越平滑
    },
    stopScroll() {
      clearInterval(this.scrollInterval);
      this.scrollInterval = null;
    },
    selectType(type) {
      this.type = type
    }
  },
  watch: {
    user() {
      this.updatePage();
    },
  },
  computed: {
    directory() {
      let closing = this.create.name.length > 0 ? "/" : "";
      return "/datasets/" + this.create.name + closing;
    },
    categoryTags() {
      let tags = {};
      this.categories.forEach((category) => {
        tags[category.name] = category.name;
      });
      return tags;
    },
    validDatasetName() {
      if (this.create.name.length === 0) return "必填";
      return "";
    },
    user() {
      return this.$store.state.user.user;
    },
  },
  created() {
    this.updatePage();
  },
};
</script>

<style scoped>
.main-container {
  width: 100%;
  height: 100%;
  background-color: #eff3f6;
}
.help-icon {
  color: darkblue;
  font-size: 20px;
  display: inline;
}
.container {
  padding-top: 15px;
  padding-left: 45px;
  padding-right: 45px;
}
.row1 {
  display: flex;
  justify-content: space-between;
}
.title,
.down-text {
  display: flex;
  justify-content: flex-start;
}
.buttons {
  display: flex;
  align-self: center;
  justify-self: flex-end;
}
.dataset-card {
  width:100%; 
  margin-bottom: 10px; 
  display:flex; 
  justify-content: space-around;
  overflow-x:scroll; 
  overflow-y:hidden; 
  scrollbar-width: none;
}

.scroll-arrow {
  font-size:35px; 
  cursor:pointer
}

.scroll-arrow:hover {
  font-size:35px; 
  cursor:pointer;
  color:#818181
}

.scroll-arrow:active {
  font-size:35px; 
  cursor:pointer;
  color:#404040
}

</style>
